<template>
	<view class="flex-col page">
		<!-- 		<u-navbar :is-back="false" title=" " :background="{background: '#F3F3F3'}">
			<view class="slot-capsule" @click="toStoreChoosePage">
				<text>切换门店</text>
				<image src="../../static/svgicon/switch.svg" mode="" class="icon"></image>
			</view>
		</u-navbar> -->
		<view class="flex-col group">
			<CustomSwiper :list="store.store_slideimages" height="440" mode="rect" border-radius="4"></CustomSwiper>
			<view class="section_2 flex-col">
				<text class="text_1">{{strSub(store.store_name,16)}}</text>
				<view class="justify-between group_1">
					<view class="flex-row group_2">
						<image src="@/static/svgicon/location.svg" class="image_3" />
						<text class="text_2">{{strSub(store.store_address,16)}}</text>
					</view>
					<text class="text_3">{{juli}}</text>
				</view>
				<view class="flex-row equal-division">
					<button class="flex-row equal-division-item" open-type="contact" @click.stop="">
						<image src="../../static/svgicon/weixin.svg" class="image_4" />
						<text class="text_4">联系客服</text>
					</button>
					<view class="flex-row equal-division-item_1" @click="makePhoneCall(store.store_mobile)">
						<image src="../../static/svgicon/mobile.svg" class="image_4" />
						<text class="text_4">联系电话</text>
					</view>
					<view class="flex-row equal-division-item_2"
						@click="openLocation(store.store_latitude, store.store_longitude, store.store_address)">
						<image src="../../static/svgicon/navigation.svg" class="image_5" />
						<text class="text_5">门店导航</text>
					</view>
				</view>
				<view class="inner_road_guide_container" style="margin-top: 30rpx;"
					@click="$u.route({url:'pages/index/innerRoadGuide',params:{id:store.id}})">
					<image class="inner_road_guide" mode="widthFix" style="width:100%; border-radius: 8rpx;"
						src="https://dancegaden-1254116920.cos.ap-chengdu.myqcloud.com/uploads/20241217/aecc87a321bdd3e07e3f9dbc40c77902.png">
					</image>
				</view>
			</view>
			<view class="flex-col section_3">
				<view class="flex-row group_4">
					<view class="left-section"> </view>
					<text class="text_8">教室列表</text>
				</view>
				<view class="flex-col">
					<view class="list-item flex-row" :key="item.id" v-for="(item, i) in rooms">
						<image :src="item.room_bannerimage" class="image_6" />
						<view class="center-group flex-col">
							<text class="text_9">{{strSub(item.room_name, 9)}}</text>
							<text class="text_11">面积：{{item.room_area}}平米</text>
							<text class="text_13">建议容纳人数：{{item.room_personnum}}人</text>
						</view>
						<view class="right-section flex-col" @click="toOrderRoomPage(item.id)"
							:class="item.status === 2 ? 'right-setion-2' : ''">
							<view class="top-text-wrapper flex-col items-center">
								<text>订</text>
							</view>
							<text class="text_16">{{item.status === 1 ? '空闲中' :'抢订中'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 24rpx;">
				<ad-custom unit-id="adunit-b85dff4fc885c3c5" bindload="adLoad" binderror="adError"
					bindclose="adClose"></ad-custom>
			</view>
			<view class="section_2 flex-col view_1">
				<view class="flex-row group_3">
					<view class="left-section"> </view>
					<text class="text_6">门店介绍</text>
				</view>
				<view class="text_7">
					<u-parse :html="store.store_desciptioncontent"></u-parse>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				store: {},
				rooms: [],
				user_lat: null,
				user_lng: null,
				promotionBannerList: [],
				tags: []
				// showPromotion: false,
				// promotionList: [],
			};
		},
		computed: {
			juli: function() {
				if (null == this.user_lat) {
					return ''
				} else {
					return this.distance(this.user_lat, this.user_lng, this.store.store_latitude, this.store
						.store_longitude)
				}
			}
		},
		onLoad({
			id
		}) {
			this.getStoreDetail(id)

			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.user_lat = res.latitude;
					this.user_lng = res.longitude;
				}
			});
		},
		methods: {
			getStoreDetail(id) {
				this.$u.api.getStorePage({
						id
					})
					.then((res) => {
						if (1 == res.code) {
							this.store = res.data.store
							this.rooms = res.data.rooms
							this.promotionBannerList = res.data.store.store_slideimages
						}
					})
			}
		},

	};
</script>

<style scoped lang="scss">
	.page {
		.promotion_container {
			width: 520rpx;
			height: 600rpx;
		}

		background-color: rgb(243, 243, 243);
		width: 100%;
		overflow-y: auto;
		height: 100%;

		.slot-capsule {
			background: #FFFFFF;
			border-radius: 28rpx;
			width: 194rpx;
			margin-left: 32rpx;
			padding: 6rpx 20rpx;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $base-font-size-14;
			font-weight: $base-font-weight-600;

			.icon {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.group {
			flex: 1 1 auto;
			overflow-y: auto;

			// .image-wrapper {
			// 	padding: 392rpx 0 36rpx;
			// 	background-image: url('../../static/assets/8ba81aca36e252cf2447f8d5fcc3f6d3.png');
			// 	background-size: 100% 100%;
			// 	background-repeat: no-repeat;
			// 	background-color: #ffffff;

			// 	.image_2 {
			// 		border-radius: 6rpx;
			// 		width: 180rpx;
			// 		height: 12rpx;
			// 	}
			// }

			.section_2 {
				padding: 20rpx 32rpx;
				background-color: #ffffff;

				.text_1 {
					color: #000000;
					font-size: $base-font-size-18;
					font-weight: $base-font-weight-600;
					line-height: 50rpx;
					white-space: wrap;
				}

				.group_1 {
					margin-top: 20rpx;
					padding-left: 8rpx;

					.group_2 {
						color: #000000;
						font-size: $base-font-size-14;
						font-weight: $base-font-weight-300;
						line-height: 40rpx;
						white-space: wrap;

						.image_3 {
							width: 40rpx;
							height: 40rpx;
						}

						.text_2 {
							margin-left: 12rpx;
						}
					}

					.text_3 {
						color: #000000;
						font-size: $base-font-size-14;
						font-weight: $base-font-weight-300;
						line-height: 40rpx;
						white-space: nowrap;
					}
				}

				.equal-division {
					margin-top: 20rpx;
					align-self: flex-start;
					color: $base-deek-purple;
					font-size: $base-font-size-14;
					font-weight: $base-font-weight-600;
					line-height: 40rpx;
					white-space: nowrap;

					.equal-division-item {
						padding: 8rpx 15rpx 6rpx;
						flex: 1 1 208rpx;
						border-radius: 8rpx;
						height: 64rpx;
						border: solid 4rpx $base-deek-purple;

						.image_4 {
							width: 40rpx;
							height: 42rpx;
						}

						.text_4 {
							margin-left: 13rpx;
							font-size: 28rpx;
							line-height: 42rpx;
							color: #D85886;
						}
					}

					.equal-division-item_1 {
						margin-left: 16rpx;
						padding: 10rpx 14rpx 6rpx;
						flex: 1 1 208rpx;
						border-radius: 8rpx;
						height: 64rpx;
						border: solid 4rpx $base-deek-purple;

						.image_4 {
							width: 40rpx;
							height: 40rpx;
						}

						.text_4 {
							margin-left: 16rpx;
						}
					}

					.equal-division-item_2 {
						margin-left: 16rpx;
						padding: 10rpx 14rpx 6rpx;
						flex: 1 1 208rpx;
						border-radius: 8rpx;
						height: 64rpx;
						border: solid 4rpx $base-deek-purple;

						.image_5 {
							width: 40rpx;
							height: 40rpx;
						}

						.text_5 {
							margin-left: 16rpx;
						}
					}
				}

				.group_3 {
					color: #000000;
					font-size: $base-font-size-14;
					font-weight: $base-font-weight-600;
					line-height: 40rpx;
					white-space: nowrap;

					.text_6 {
						margin-left: 12rpx;
					}
				}

				.text_7 {
					margin-top: 32rpx;
					color: #000000;
					font-size: $base-font-size-14;
					font-weight: $base-font-weight-300;
					line-height: 40rpx;
					text-align: left;
				}
			}

			.view_1 {
				margin-top: 16rpx;
			}

			.section_3 {
				margin-top: 16rpx;
				padding: 20rpx 32rpx 20rpx;
				background-color: #ffffff;

				.group_4 {
					padding: 0 2rpx;
					color: #000000;
					font-size: $base-font-size-14;
					font-weight: $base-font-weight-600;
					line-height: 40rpx;
					white-space: nowrap;

					.text_8 {
						margin-left: 12rpx;
					}
				}

				.list-item {
					padding: 32rpx 2rpx 32rpx;
					border-bottom: solid 2rpx rgb(235, 235, 235);

					&:last-child {
						border-bottom: 0;
					}

					.image_6 {
						border-radius: 16rpx;
						width: 200rpx;
						height: 200rpx;
					}

					.center-group {
						margin-left: 24rpx;
						flex: 1 1 auto;

						.text_9 {
							color: #000000;
							font-size: $base-font-size-14;
							font-weight: $base-font-weight-600;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_11 {
							margin-top: 20rpx;
							color: #000000;
							font-size: $base-font-size-14;
							font-weight: $base-font-weight-300;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_13 {
							margin-top: 12rpx;
							color: #000000;
							font-size: $base-font-size-14;
							font-weight: $base-font-weight-300;
							line-height: 40rpx;
							white-space: nowrap;
						}
					}

					.right-section {
						margin-left: 40rpx;
						margin-top: 32rpx;
						border-radius: 8rpx;
						// width: 116rpx;
						height: 116rpx;
						border: solid 2rpx rgb(23, 190, 187);

						.top-text-wrapper {
							padding: 10rpx 0 12rpx;
							color: rgb(247, 247, 247);
							font-size: $base-font-size-18;
							font-weight: 600;
							line-height: 50rpx;
							white-space: nowrap;
							background-color: rgb(23, 190, 187);
							border-radius: 8rpx 8rpx 0px 0px;
							width: 116rpx;
						}

						.text_16 {
							align-self: center;
							color: rgb(23, 190, 187);
							font-size: $base-font-size-14;
							font-weight: $base-font-weight-300;
							line-height: 40rpx;
							white-space: nowrap;
						}
					}

					.right-setion-2 {
						border: solid 2rpx rgb(255, 230, 109);

						.top-text-wrapper {
							color: rgb(77, 70, 34);
							background-color: rgb(255, 230, 109, );
						}

						.text_16 {
							color: rgb(77, 70, 34);
						}
					}
				}
			}

			.left-section {
				margin: 6rpx 0;
				background-color: $base-deek-purple;
				width: 8rpx;
				height: 28rpx;
			}
		}

		.tab-bar {
			padding: 17rpx 35rpx 14rpx;
			background-color: #ffffff;
			border: solid 2rpx rgb(233, 233, 233);

			.group_9 {
				margin-top: 2rpx;
				color: $base-deek-purple;
				font-size: $base-font-size-14;
				font-weight: $base-font-weight-600;
				line-height: 40rpx;
				white-space: nowrap;
				width: 112rpx;
				height: 95rpx;
			}

			.group_10 {
				margin-top: 2rpx;
				color: $base-deek-purple;
				font-size: $base-font-size-14;
				font-weight: $base-font-weight-600;
				line-height: 40rpx;
				white-space: nowrap;
				height: 95rpx;
			}

			.group_11 {
				margin-top: 7rpx;
				color: $base-deek-purple;
				font-size: $base-font-size-14;
				font-weight: $base-font-weight-600;
				line-height: 40rpx;
				white-space: nowrap;
				height: 90rpx;

				.section_4 {
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					border: solid 4rpx rgb(213, 213, 213);
				}

				.text_35 {
					margin-top: 10rpx;
				}
			}

			.group_12 {
				color: $base-deek-purple;
				font-size: $base-font-size-14;
				font-weight: $base-font-weight-600;
				line-height: 40rpx;
				white-space: nowrap;
				height: 97rpx;

				.text_36 {
					margin-top: 3rpx;
				}
			}

			.image_11 {
				width: 54rpx;
				height: 54rpx;
			}
		}
	}
</style>